<!DOCTYPE html>
<html lang="en">

<head>
    <title>js调用摄像头拍照上传图片</title>
    <meta charset="utf-8">
</head>

<body>
    <div style="margin: 0 auto;margin-left: 200px;">
        <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
        <canvas id="canvas" width="500px" height="500px"></canvas>

    </div>
    <div style="margin: 0 auto;">

        <button onclick="closeMedia()" style="margin-left: 250px;margin-right: 700px;">关闭摄像头</button>
        <button onclick="openMedia()">开启摄像头</button>
        <button onclick="takePhoto()">拍照</button>
        <button onClick="saveFile(filename);" type="button">下载图片</button>
    </div>


    <script>
        let mediaStreamTrack = null; // 视频对象(全局)
        let video;

        function openMedia() {
            let constraints = {
                video: {
                    width: 500,
                    height: 500
                },
                audio: false
            };
            //获得video摄像头
            video = document.getElementById('video');
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then((mediaStream) => {
                // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
                mediaStreamTrack = mediaStream.getVideoTracks()
                video.srcObject = mediaStream;
                video.play();
            });
        }

        // 拍照
        function takePhoto() {
            //获得Canvas对象
            let video = document.getElementById('video');
            let canvas = document.getElementById('canvas');
            let ctx = canvas.getContext('2d');
            ctx.drawImage(video, 50, 65, 500, 365);


            // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
            let img = document.getElementById('canvas').toDataURL();
            // 这里的img就是得到的图片
            console.log('img-----', img);　　　　　

            //下面的代码是保存canvas标签里的图片并且将其按一定的规则重命名
            var type = 'png';

            var _fixType = function(type) {
                type = type.toLowerCase().replace(/jpg/i, 'jpeg');
                var r = type.match(/png|jpeg|bmp|gif/)[0];
                return 'image/' + r;
            };


            　
            // $.ajax({　　　　　　　　
            //     url: "/xxxx.do"　　　　　　　　,
            //     type: "POST"　　　　　　　　,
            //     data: {
            //         "imgData": img
            //     }　　　　　　　　,
            //     success: function(data) {　　　　　　　　
            //         console.log(data);　　　　　　　　
            //         document.gauges.forEach(function(gauge) {　　　　　　　　
            //             gauge.value = data.data　　　　　　
            //         });　　　　　　
            //     }　　　　　　,
            //     error: function() {　　　　　　　　
            //         console.log("服务端异常！");　　　　　　
            //     }　　　　　　
            // });

        }


        var type = 'png';

        var _fixType = function(type) {
            type = type.toLowerCase().replace(/jpg/i, 'jpeg');
            var r = type.match(/png|jpeg|bmp|gif/)[0];
            return 'image/' + r;
        };
        /**
         * @param  {String} filename 文件名
         */
        var saveFile = function(filename) {
            //获取canvas标签里的图片内容
            var imgData = document.getElementById('canvas').toDataURL(type);
            imgData = imgData.replace(_fixType(type), 'image/octet-stream');

            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = imgData;
            save_link.download = filename;

            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        };

        // 下载后的文件名规则
        var filename = (new Date()).getTime() + '.' + type;

        // 关闭摄像头
        function closeMedia() {
            let stream = document.getElementById('video').srcObject;
            let tracks = stream.getTracks();

            tracks.forEach(function(track) {
                track.stop();
            });

            document.getElementById('video').srcObject = null;
        }
    </script>
</body>